<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>m.jd</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="swiper/swiper-bundle.css">
</head>
<script src="./swiper/swiper-bundle.js"></script>

<body>
    <!-- 头 -->
    <div class="head">
        <div class="menu">

        </div>
        <div class="search">
            西门子开关
            <i></i>
        </div>
        <div class="login">登录</div>
    </div>
    <!-- 焦点图 -->
    <div class="banner">
        <!-- Swiper -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href="#">
                        <img src="./upload/1.dpg" alt="">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#">
                        <img src="./upload/2.dpg" alt="">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#">
                        <img src="./upload/3.dpg" alt="">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#">
                        <img src="./upload/4.dpg" alt="">
                    </a>
                </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
    </div>

    <!-- nav -->
    <nav>
        <ul>
            <li>
                <a href="#">
                    <img src="./images/1.png" alt="">
                    <p>京东超市</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/2.png" alt="">
                    <p>京东超市</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/3.png" alt="">
                    <p>京东超市</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/4.png" alt="">
                    <p>京东超市</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/5.png" alt="">
                    <p>京东超市</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/6.png" alt="">
                    <p>京东超市</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/7.png" alt="">
                    <p>京东超市</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/8.png" alt="">
                    <p>京东超市</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/9.png" alt="">
                    <p>京东超市</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/10.png" alt="">
                    <p>京东超市</p>
                </a>
            </li>
        </ul>
    </nav>
    <div class="clear"></div>
    <!-- 推荐 -->
    <div class="recom">
        <ul>
            <li>
                <a href="#">
                    <h3></h3>
                    <p>正品直邮</p>
                    <img src="./upload/1-1.dpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <h3>来电好货</h3>
                    <p>3C大放价</p>
                    <img src="./upload/1-2.dpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <h3>国潮风尚</h3>
                    <p> 国货正当时 </p>
                    <img src="./upload/1-3.dpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <h3></h3>
                    <p> 都是你爱的 </p>
                    <img src="./upload/1-4.dpg" alt="">
                </a>
            </li>
        </ul>
    </div>
    <!-- 底部 -->
    <div class="floor">
        <ul>
            <li>
                <a href="#">
                    <img src="./upload/2-1.png" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./upload/2-2.png" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./upload/2-3.png" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./upload/2-4.png" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./upload/2-5.png" alt="">
                </a>
            </li>
        </ul>
    </div>

    <script>
        var swiper = new Swiper('.swiper-container', {
            loop: true,
            autoplay: true,
            pagination: {
                el: '.swiper-pagination',
            },
        });
    </script>
</body>

</html>